@import 'max600.css' only screen and (max-width : 600px); 
@import 'min600max850land.css' only screen and (min-width : 601px)  and (max-width: 849px) and (orientation: landscape);
@import 'min600max850port.css' only screen and (min-width : 601px)  and (max-width: 849px) and (orientation: portrait);
@import 'min850pc.css' only screen and (min-width : 850px); 
:root {

    --main-color-gsi01 : hsl(324, 10%, 90%);
    --main-color-gsi02 : hsl(21, 74%, 46%);
    --main-color-gsi03 : hsl(213, 9%, 25%);
    --main-color-gsi04 : hsl(107, 35%, 33%);
    --main-color-gsi05 : hsl(200, 33%, 64%);
    --main-color-gsi06 : hsl(43, 68%, 53%);
    --main-color-gsi07 : hsl(348, 35%, 42%);

    --main-ral2003: hsl(23, 92%, 56%);
    --main-ral2004: hsl(22, 97%, 45%);
    --main-ral7012 : hsl(189, 4%, 35%);
    --main-ral7016 : hsl(204, 8%, 24%);
    --main-ral7021 : hsl(204, 5%, 19%);

    --main-color00: hsl(0,0%,0%);
    --main-color01: hsl(0,0%,0%);
    /* --main-color02:hsl(0,0%,20%); */
    --main-color02: var(--main-ral7016);
    --main-color03: hsl(189, 4%, 35%);
    --main-color04: hsl(0,0%,35%);
    --main-color05: hsl(189, 4%, 35%);
    --main-color06: hsla(189, 4%, 35%,0.75);
    --main-color08: hsl(0, 0%, 100%);
    --main-color10: hsl(0,0%,100%);
    --main-color20: hsl(120,99%,36%);
    --main-color25: var(--main-color-gsi02);
    /* --main-color30: hsl(39, 100%, 50%); */
    --main-color30: var(--main-color-gsi02);
    --main-color40: hsl(60, 100%, 50%);
    --main-color50: hsl(200, 100%, 70%);
    --main-color-error: hsl(0, 100%, 50%);
    --main-color-alarm: hsl(0, 100%, 50%);
    --main-color-alarm1: hsl(0, 98%, 40%);


    --main-color-slave: hsl(209, 100%, 90%);
/*
    --main-ral2004: hsl(22, 97%, 45%);
    --main-ral7012 : hsl(189, 4%, 35%);
    --main-ral9010 : hsl(41, 36%, 91%);
*/
    --main-cold : hsl(249, 100%, 50%);
    --main-hot  : hsl(0, 100%, 50%);
    --main-gpcolor :  lightslategray;
	--main-summer-color: #66ccFF;

    --bd-radius : 2px;
}

/* Commentare se il font è esterno */
@font-face {
    font-family: "Quicksand";
    src: url("Quicksand.ttf") format("truetype");
}

* {font-family:'Quicksand',sans-serif;margin:0%;} 

html{background-color: var(--main-color00);}
body{height:2000px; background-color: var(--main-color00);}
a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration: none;}
button {
	background-color: transparent;
	cursor : default;
	border: none;
    padding:0px;
}

/* body.waiting * {cursor: progress;}*/
.mainDiv,.mainBody{position:absolute;background-color:var(--main-color00);}

.mainDiv {
    top: 0px;
    left: 0px;
    width: 100%;
    margin: 0px; 
}
.mainBody {
    color: var(--main-color10); 
    top: 90px;
    left: inherit; 
    width: inherit; 
}

.topBar,.bottomBar{
    position:fixed;
    /* background-color:var(--main-color05); */
    width: inherit;
    z-index: 1000; 
}
.topBar {
    top:0px;
    height:50px;
    background-image: linear-gradient(var(--main-color05),rgb(0,0,0));
}
.bottomBar {
    bottom:0px;
    background-image: linear-gradient(rgb(0,0,0), var(--main-color05));
}
.topBarCell {
    display: grid;
    grid-template-columns: 25% auto 25%;
    width: 100%;
    place-items:center;
}
.topBarSubCell {
    display: grid;
    grid-template-columns: 33% auto 33%;
}


.topBar1,.topBar2 {
    position: fixed;
    background-color: var(--main-color00); 
    display: inline-grid;
    height: 20px; 
    width: inherit;
    z-index: 1; 
}
.topBar1 {top: 50px;}
.topBar2 {top: 70px;}

.bottomBarCell {
    display: grid;
    grid-template-columns: repeat(5, 20%);
    width: 100%;
    place-items:center;
}

.revImg {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.buttonAlertOff {background-color: none;} */

.buttonAlertOn {
	background-color: var(--main-color-alarm);
    cursor: pointer;
}
.buttonFull {width:inherit;height:inherit;}

.fgcolor00 {color:var(--main-color00);}
.fgcolor08 {color:var(--main-color08);}
.fgcolor10 {color:var(--main-color10);}
.fgcolor30 {color:var(--main-color30);}

.bgcolor02 {background-color:var(--main-color02);}
.bgcolor03 {background-color:var(--main-color03);}
.bgcolor03_bis {
    background-color: hsla(189, 4%, 35%,0.8);
}
.bgcolor05 {background-color:var(--main-color05);}
.bgcolor08 {background-color:var(--main-color08);}
.bgcolor10 {background-color:var(--main-color10);}
.bgcolor30 {background-color:var(--main-color30);}

.gridAlignItems {display:grid;place-items:center;}
.gridAlignItemsLeftCenter {display:grid;justify-items:left;align-items:center;}
.gridAlignItemsRightCenter {display:grid;justify-items:right;align-items:center;}

/* .gridRowCell {
    display:grid;
    grid-template-columns: 15% 25% 25% auto;
    grid-template-rows: 50% auto;
    align-items:center;
}
.gridRowCell1Item1 {
    display:grid;
    grid-template-columns: 100%;
    grid-template-rows: 60% auto;
    align-items:center;
    height:inherit;
}
.gridRowCell1Item2 {
    display:grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    align-items:center;
    height:inherit;
} */

/* .gridRowCellFull {
    display:grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    height: 100%;
    width:100%;
} */

/* .gridInfoCell {
    display: grid;
    grid-template-columns: 50% 50%;
} */

.opacity036 {opacity:0.36;}
.opacity100 {opacity:1.0;}

/* .gridRowCellOnOffButtonLeft {
    display:grid;
    grid-template-columns: 35% auto 35%;
    grid-template-rows: auto;
}
.gridRowCellRegolazioniLabel {
    display:grid;
    grid-template-columns: 100%;
    grid-template-rows: 25% auto;
    height: 80%;
    width:100%;
} */

/* .button_onoff,.button-t1 {
    border: 1px solid var(--main-color10);
    width: 60px;
    height: 60px;
}

.button_onoff2,.button-t2 {
    border: 1px solid var(--main-color10);
    width: 50px;
    height: 50px;
}

.button_plus_minus,.button-t3 {
	border: 1px solid var(--main-color10);
	color: var(--main-color10);
	cursor: pointer;
    width: 68px;
    height: 68px;
} */

.bandRowName {display:grid;align-items:center;}

/* .imgPlusMinus {width:50px;height:auto;} */

.borderRadius { border-radius : var(--bd-radius);}

.btnModDefault ,.btnDays {
    background-color: var(--main-color03);
    color : var(--main-color10);
}
.btnModClicked ,.btnDaysClicked {
    background-color: var(--main-color25);
    /* color : black; */
} 
.btnModMenu {
    color : var(--main-color10);
    background-color: var(--main-color02);
}
.btnModMenu:hover {
    color : var(--main-color00);
    background-color: var(--main-color25);
}
.btnModMenu02 {
    color : var(--main-color10);
    background-color: var(--main-color02);
}

.autoUpContainer {
    position: relative;
    top:200px;
    text-align: center;
    color: var(--main-color10);
}
/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}   

.upBeetle {width:100%;}

.parentDays, .parentDays1,.line_of_4_btns {
    display: inline-grid;
    align-self: center;
    justify-self: center;
}

.parentDays,.line_of_4_btns {
    width:100%;
    height:80%;
}
.parentDays1 {
    width:100%;
    height:100%;
}

.parentDays > button {
    border:1px solid var(--main-color00);
    color : var(--main-color10);
    background-color: var(--main-color03);
}
.parentDays > button:hover {
    color : var(--main-color00);
    background-color: var(--main-color25);
}
.line_of_4_btns > button {
    border:1px solid var(--main-color00);
}

.buttonCursor {cursor: pointer;}

.buttonRowbands {
    width: 100%;
    height: 65%
}

/* .button_write {
    border: 1px solid var(--main-color10); 
    background-color: var(--main-color02);
}         */

.button-fancoil {
    width:80%;
    height:50px;
}
/* Css per il layout responsive */
.row:after {
    content: "";
    display: table;
    clear: both;
}
 
.col-50 {
    float: left;
    width: 50%;
}

.hide600,.reserved {
    display:block;
}

@media screen and (max-width: 600px) {
    .col-50 {
      width: 100%;
      margin-top: 0;
    }
    .hide600,.reserved {
        display:none;
    }
    
}

/* .overlay,.overlay1 {
    position: relative;
    z-index: 2;
    cursor:pointer;
    border:1px solid var(--main-color30);
}

.overlay-title {
    border-top-left-radius:3px;
    border-top-right-radius:3px;  
    background-color: var(--main-color30);
    color: var(--main-color10); 
}
.overlay-button {
    width:60px;
    height:85%;
    background-color: var(--main-color30);  
} */

.input-edit, .input-noedit, .input-error {
    width: 90%;
    text-align: center;
    height: 60%;
    background-color: var(--main-color02);
    padding: 0;
}

.input-edit, .input-error {
    color: var(--main-color10);
    cursor: pointer;
}
.push_button,.input-edit {
    border: 1px solid var(--main-color25);
}
.push_button1 {
    border-top: 1px solid var(--main-color00);
    border-bottom: 1px solid var(--main-color00);
}

.input-noedit {
    border: 1px solid var(--main-color10);
    color: var(--main-color10);
}
.input-error {
    border: 1px solid var(--main-color-error);
}


@keyframes blinking1 {
    0% {
      background-color: var(--main-color05);
    }
    /* 49% {
      background-color: var(--main-color05);
    }
    50% {
      background-color: var(--main-color-alarm);
    } */
    100% {
      background-color: var(--main-color-alarm);
    }
  }

  .blinkClass {
    animation: blinking1 1s infinite;
  }

@keyframes blinking2 {
    0% {
        opacity: 0;
    }
    /* 49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }  */
    100% {
        opacity: 1;
    }
  }
  .blinkClass1 {
    animation: blinking2 1s infinite;
  }

/* --- */

.imgBk {
    width: 200px;
    height: auto;
}

.overexp {
    position: fixed;
    z-index: 900;
    cursor:pointer;
    height:max(60%);
    bottom: -1200px;
    width: 450px;
    background-color: var(--main-color05);
    border-top-right-radius: var(--bd-radius);
    border-top-left-radius: var(--bd-radius);
    text-align: center;
    overflow-y: auto;
}

.mnuButtonAdaptive {
    width:98%;
    height:100%;
}

/* Centered text */
.centnav {
    left: 50%;
    transform: translate(-50%, 0%); 
    transition: bottom 0.6s
}   


@media screen and (max-width: 600px) {
    .overexp {
        width: 90%;
        height:max(460px);
        bottom:50px
    }
    .centnav {
        left: -50%;
        transition: left 0.6s
    }
}

.rowHeight10px{height:10px;}
.rowHeight30px{height:30px;}
.rowHeight40px{height:40px;}
.rowHeight50px{height:50px;}
.rowBar50px{height:50px;}
.rowHeight55px{height:55px;}
.rowHeight60px{height:60px;}
.rowHeight70px{height:70px;}
.rowHeight80px{height:80px;}
.rowHeight100px{height:100px;}
.rowHeight150px{height:150px;}

.mnuPlaceholder {opacity:1}
  
.row-tb-preset-buttons {
    height:60px;
}
.row-tb-save-button,.row-tb-days-button {
    height:50px;
}
.row-tb-days-button {
    background-color: var(--main-color02);
}

@media screen and (max-width: 600px) {
    .row-tb-preset-buttons {
        height:40px;
    }
    .row-tb-save-button,.row-tb-days-button {
        height:40px;
    }
}

ul,menu {padding: 0;}

li{list-style-type: none;}

#PageMenu > li {
    border-bottom : 1px solid var(--main-color03);
}
#PageMenu > li:last-child {
    border-bottom : 1px solid var(--main-color00);
}

.rowPdcMnu,.split_20_60_20 {
    display:grid;
    grid-template-columns: 20% 60% 20%;
}
.text-left {text-align: left;}
.text-right {text-align: right;}

.row-time-slot {
    height:80px;
}
.row-tb-save-button,.row-tb-days-button {
    height:50px;
}
.row-tb-days-button {
    background-color: var(--main-color02);
}
@media screen and (max-width: 600px) {
    .row-time-slot {
        height:60px;
    }
    .row-tb-save-button,.row-tb-days-button {
        height:40px;
    }
}

.img10px{width:10px;height:auto;}
.img13px{width:13px;height:auto;}
.img20px{width:20px;height:auto;}
.img30px {width:30px;height:auto;}
.img35px {width:35px;height:auto;}
.img40px {width:40px;height:auto;}
.img50px {width:50px;height:auto;}
.img70px {width:70px;height:auto;}
.img130px {width:130px;height:auto;}

.varFont08 {font-size:0.8rem}
.varFont10 {font-size:1.0rem}
.varFont12 {font-size:1.2rem}
.varFont15 {font-size:1.5rem}
.varFont16 {font-size:1.6rem}
.varFont25 {font-size:2.5rem}

@media screen and (max-width: 600px) {
    .img35px {width:2.0rem;height:auto;}
    .img40px {width:2.0rem;height:auto;}
    .img70px {width:4.0rem;height:auto;}

    .varFont08 {font-size:0.7rem}
    .varFont10 {font-size:0.8rem}
    .varFont12 {font-size:1.2rem}
    .varFont15 {font-size:1.5rem}
    .varFont16 {font-size:1.3rem}
}